import React, { Component } from 'react'
import ComDChild from './ComDChild'
import ComDChild2 from './ComDChild2'
import LiCom from './LiCom.jsx'
import Boundaries from './Boundaries.jsx'
import HOC from './HOC.jsx'

export default class ComD extends Component {
  constructor() {
    super();
    this.state = {
      age: 18,
      name: 'Tom'
    }
  }
  changeName() {
    this.setState({
      name: 'Jack'
    })
  }
  changeAge() {
    this.setState({
      age: 20
    })
  }
  render() {
    return (
      <div>
        <p>组件的性能优化：1.减少操作dom的次数2.减少操作dom的数量</p>
        {/* shouldComponentUpdate可以在数据更新页面不需要更新时，进行优化 */}
        {/* componentWillUnmount，可以在页面销毁时，清除定时器、事件监听等内容，释放资源 */}
        <ComDChild
          name={this.state.name}
        ></ComDChild>
        <ComDChild2
          name={this.state.name}
        ></ComDChild2>
        <button onClick={()=>this.changeAge()}>修改age-{this.state.age}</button>
        <button onClick={()=>this.changeName()}>修改name-{this.state.name}</button>
        <hr></hr>
        <ul>
          <Boundaries>
            <LiCom></LiCom>
          </Boundaries>
        </ul>
        <HOC></HOC>
      </div>
    )
  }
}
